iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 8

【Day8】從bootstrap看css優先權,box-model,以及帶你加設響應式文字和Googlefont字體

  • 分享至 

  • xImage
  •  

雖然上星期,我們已經基本完成了整個頁面,不過還是有少量問題,一:dropdown顏色並不美觀,二:很多地方彼此的相距實在太近,例如下方的cards,三:文字並不會跟隨螢幕大小,而改變文字風格亦欠變化。我們今天,就來吧這些小地方修改修改吧。

由Dropdownmenu看css優先權的問題

當我們更改後,你會發現一個情況,dropdown menu 並不會跟隨你的顏色設定而改變。為什麼會這樣?大家都知道吧,bootstrap這個框架,其實他的原檔案,也是css和javscript來的。而他,對於每一個我們設定的class,都會有預設的css編碼,所以我們輸入class時,就會直接把已經設定好的裝潢放到相應的html編碼上,而造成了我們看起來的改變。而在css世界裡面,有一項我們稱為優先權的規則。這裡,或者我們可以用台幣來做比喻。

從台幣看css權重

台幣中,最高面額的為2000台幣,在css世界裡!important則有著相同的高價值在 ,只要有他在,任何一切都會被它凌駕,所以如非必要,一般都不太建議使用。

第二大面額為1000台幣,相信大家還記得在html裏,也可以用style= 這種形式來增加css吧,而他的價值,也同樣在html裡面,位居第二。

第三大面額為500台幣,id則是這位置了。

第四大面額為200台幣,而class則是這位置。

最後為100台幣,其他的html元素,例如p,h1等都在這位置,不過這裡有點特別的是,越在外層的影響力會越細,就好像古代的官員那樣,越接近首都,你的地位也就越高,相反被流放邊疆的,多數已被朝廷棄用,這裡道理也是相近。

而因為bootstrap本身對於dropdown-item和dropdown-menu這兩個class都有設定,所以無論我們在外圍怎樣設定,也不會有任何影響,因為外圍設定,在css世界裡地位根本就不夠高去影響。

所以我們需要在dropdown-item和dropdown-menu裏分別添加希望改變的顏色,以及文字顏色,這樣就能夠成功改變了。

<ul class="dropdown-menu bg-info  " >
     <li>
     <a class="dropdown-item text-white bg-info "  href="#">Action</a>
     </li>
</ul>

相距太近的問題

當然,最簡單的方法,我們可以直接透過<br>來改變兩件物件之間的距離。例如這樣:

不過問題是,這方法只能夠增加上下的距離,至於左右則無辦法了。這時候,我們需要使用到css的另一個機制,css box model。

Box model

在說html的時候,不是有提及過,網頁是由一個個的長方格組成嗎?這些長方格子,還是有一定的規格,讓你能夠很方便地調整大小。我們下面就用一張兔子綁架為大家解釋解釋吧。(可憐的兔子)

用被綁架的兔子,解釋css的box model

在最中心被綁架的兔子,就是在格內的主要內容:content,例如我們網頁中見到的文章,標題、圖片等等,他們就充當著兔子角色。

一間屋總是有內牆和門吧,這個牆就等於border,把content圍在裡面

雖然我們是把兔子綁著了,但若把牠放到門前,牠還是有機會逃脫,所以基於安全理由,我們還是把牠放到中心點會好點。而牠和門之間距離,在cssl裏,我們就會把這稱為padding

不過這可憐的兔子,是被人綁架在鬧市附近的。為了不被其他人發現,所以牆是經過特別訂造的,綁架的人,在外牆和內牆之間,加入了厚厚的石棉,這樣牠發出多大的聲響,也沒有人聽到了。而這層厚厚的石棉,就是margin了。

雖然我明白了分別了,但是,在css的世界裡,可不需要什麼隔音呢,那該什麼時候用margin,什麼時候用padding呢?

我們可以用最簡單的方法去思考:

假若你會見到border,而你希望你裏面的東西,遠離border,那麼就用padding。

假如是希望兩件物件之間的距離能夠拉開或者重疊呢?那就用margin。

Bootstrap margin padding

我們回到bootstrap,在bootstrap如何能夠做到margin和padding這些設定?

基本class
bootstrap用m來代表margin,用p來代表padding。

方位
無論是在css還是bootstrap,不論是margin和padding,他們都能夠透過上下左右來指示,但bootstrap多了x和y來同時設置左右,以及上下。

t-代表著上
b-代表著下
l-代表著左
r-代表著右
x-同時設置左右
y-同時設置上下

大小設定

bootstrap以0,1,2,3,4,5來代表不同大小,數字越大距離越大,0則為不設定

另外亦有auto,auto讓系統自行判斷並自動調整自,例如在選單中,我們就加入了這個,因為bootstrap裏原先預設為justify-content-between,讓所以這樣search和選單兩者左右分開 。

你亦可以加入之前提及的bootstrap 螢幕大小breakpoint,來改變,在不同大小下,margin和padding的距離為多大。

sm:≥576px
md:≥768px
lg : ≥992px
xl : ≥1200px

實例:

例如我們希望網頁在平板螢幕或以上的螢幕大小時,下方margin 的大小為5,然後平板螢幕或以下的螢幕大小時,下方margin 的大小則為1,我們在class裡面,則可以這樣輸入。

<div class=" mb-md-5 mb-1">

明白了吧,是不是很簡單呢,現在你可以嘗試在你自己的網站,在你認為需要增加空間的地方,嘗試自己加入margin或padding喔。

Bootstrap border

Border方面呢?Bootstrap 主要只能夠設定到邊界是否顯示,想要什麼顏色,是否需要圓角,以及需要多圓。

邊界是否顯示

Bootstrap主要是用:top,right,bottom和left來選擇需要顯示那邊,假若加入0,則是不顯示,若只是border,則全部都顯示。

詳細編碼可以看下方:

<span class="border"></span>  全部邊界顯示

<span class="border-top"></span>只顯示上邊

<span class="border-right"></span>只顯示右邊

<span class="border-bottom"></span>只顯示下邊

<span class="border-left"></span> 只顯示左邊

<span class="border-0"></span>全部邊界消失

<span class="border-top-0"></span>消失上邊

<span class="border-right-0"></span>消失右邊

<span class="border-bottom-0"></span>消失下邊

<span class="border-left-0"></span>消失左邊

顏色改變:

原理和background和文字的顏色是一樣,不過由bg-顏色會轉變為border-顏色,例如primary的話,class就會是border-primary,而不再是bg-primary,至於有什麼顏色選擇看下方編碼和圖片吧。

border顏色的選擇

圖片來源至bootstrap
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

圓角設定

跟上方一樣,都是透過top,right,bottom和left來控制,詳細編碼和編碼解釋在下方:

<img src="..." alt="..." class="rounded">  全部圓角
<img src="..." alt="..." class="rounded-top">  上方兩角為圓角
<img src="..." alt="..." class="rounded-right">  右方兩角為圓角
<img src="..." alt="..." class="rounded-bottom"> 下方兩角為圓角
<img src="..." alt="..." class="rounded-left">  左方兩角為圓角
<img src="..." alt="..." class="rounded-left"> 直角

圓角幅度設定

這裡很有趣,可以直接在round後加入-circle或-pill,把邊框設定為圓形或藥丸形。另外亦可以透過加入-lg和-sm,來設定邊框圓角的幅度,要大還是要小。

藥丸形和圓形

圖片內容來至bootstrap官網

大幅度的圓角和小幅度的圓角

左邊為小圓角,右邊為大圓角(圖片內容來至bootstrap官網)
<img src="..." alt="..." class="rounded-circle">  圓形
<img src="..." alt="..." class="rounded-pill">   藥丸形
<img src="..." alt="..." class="rounded-sm">  小幅度的圓角
<img src="..." alt="..." class="rounded-lg">   大幅度的圓角

小作業:
dropdown item 裏不是有個邊界嗎?大家可以試試用上方的編碼來讓邊界消失啊

文字

雖說bootstrap什麼都有響應式設計,但在文字方面,卻並沒有,用家需要另行下載官方提供的額外檔案,並加入scss,或自行加入css去進行修改,這裡我們將會重點介紹後面的方案。

css常見的大小單位

不過我們在開始前,先了解一些有關於css常見的大小單位:px,em,rem,%, vw,vh吧。

px

這個最簡單,一個px等於一個螢幕的小格,我們在pixabay下載圖片時,假若要下載最小大小圖片時,不是會見到大小為640x426嗎,這代表它闊度佔640個螢幕小格,高度佔426個螢幕小格。

em

1個em等於16px,為甚麼是16px呢,這是受到html所訂的文字大小所影響,假若沒特意去設定,那麼就會自動設定為16px。

我們可以透過css來修改,例子:
html {
font-size:20px
}

不過,他不是穩定是這樣的,假若他在越內層,那麼那個字看起來就會越大。為什麼這樣呢?因為em,是會受到外層的字體大小而影響的。

<div style="font-size:1.2em;">1.2em
    <div style="font-size:1.2em;">1.2em
        <div style="font-size:1.2em;">1.2em
            <div style="font-size:1.2em;">1.2em
                <div style="font-size:1.2em;">1.2em</div>
            </div>
        </div>
    </div>
</div>

例如上方的最內層的文字大小,就會是:16px *1.2px * 1.2px * 1.2px *1.2px *1.2px

最後上張圖,讓大家了解了解上面編碼最後會出現的結果。

使用em後,位於內層的文字大小,會受到外層的文字大小影響

rem

其實他和px頗為相似,但分別在於,他會受到html所影響,所以在正常情況下,一個rem也是等於16px,但他是固定的,他不像em那樣,會受外層設定的字體大小影響。

***% ***

其實也就只是em,大家性質一樣,只是看起來不同。大家都知道吧,100%其實也就是等於1,這裡的%,其實也只是用了這個概念例如剛才的1.2em, 這裡就會變成120%。

vw 和 vh:

這兩個,能夠讓你的圖片或文字,按著螢幕大小而改變,1vw/1vh就等於1%的螢幕闊度/高多,例如我們現在把文字設為了4vw,那麼文字就會等於4%的螢幕闊度

Bootstrap文字大小設定

再來我們了解一下,bootstrap設定了的文字大小:

Display 1 (6rem = 90px)
Display 2 (5.5rem = 82.5px)
Display 3 (4.5rem = 67.5px)
Display 4 (3.5rem = 52.5px)
h1 (2.5rem = 40px)
h2 (2rem = 32px)
h3 (1.75rem = 28px)
h4 (1.5rem = 24px)
h5 (1.25rem = 20px)
h6 (1rem = 16px)
p (1rem = 16px)

該知道的都已經知道了,不過該怎麼修改?

這裡有兩個方法:

假若你有把bootstrap css檔案下載下來, 我們可以直接透過官方提供的scss修改檔案,詳細可以看這裡,不過沒有呢?

我們可以直接加入這條公式在css裏:

@media (max-width: 1200px) {
 font-size: calc( 1rem +   1vw); }

這條公式能夠讓你的文字,根據螢幕大小,作出改變,當然數字是可以自行調整的。當中,@media能夠讓文字大小,不會無限變大或者可以設定,由那裡開始。而我們在這裡我們加入max-width: 1200px,原因是因為我們希望當到達bootstrap電腦螢幕的breakpoint時,就會停止增長,所以就這樣設定。

不過為何要rem和vw雙加?這是因為vw當螢幕越小,文字就會越小,當螢幕到一定程度小時,字會變得小得離譜,透過設定rem,就能夠設定一個最低限度的大小,這樣文字大小,也就能在你理想範圍了

這裡有些在各文字大小的情況下, 一些數值的參考,有需要用到的時候,只需要複製有用的那部分就可以了,當然你可以自行再作微細調節。

@media (max-width: 1200px) {

  h1{
    font-size: calc(1.375rem + 1.5vw);
  }
  h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3{
    font-size: calc(1.3rem + 0.6vw);
  }
  h4{
    font-size: calc(1.275rem + 0.3vw);
  }
  h5{
    font-size: calc(1.225rem + 0.3vw);
  }

 h6{
    font-size: calc(1.2rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }

  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
 
  .lead {
    font-size: calc(1rem + 0.3vw);
  }
   
  p{
    font-size: calc(0.75rem + 0.3vw);
  }

字體上的改變,則相對上而言,較為簡單,我首先到googlefont網站,選擇自己識合的字體,選擇後我們選擇合適的粗幼然後按+select this style,接著按show your select view family,然後按emebed,把link那段複製起來,放到<head>下。

如何在googlefont上選擇字體

把googlefont的 link 放到 css的head下

接著,embed下不是有css嗎,把它複製下來然後放到css內例如如果您希望全部改掉:

body { font-family: 'Open Sans Condensed', sans-serif;}

假若只是h1,那麼body就會變成h1,假若是display2,body就會變成display2。

總結

Bootstrap 系列終於圓滿結束了,希望這數天的內容,能夠讓大家對bootstrap有一些基本認識,亦都能夠運用到bootstrap,更改html模樣。都是那句說話,上面這些的,也不過只是bootstrap一角,不過掌握了這些基本的,已經足夠你,做出各式各樣的變化出來,大家假若希望更深入了解,可以到bootstrap官網再作更詳細的了解喔。

至於最終成果?可以在下方的連結看到:
https://www.w3schools.com/code/tryit.asp?filename=GJ65HD431F0D

明天我們將會正式動手去製作簡單的wordpress主題,有興趣,記謹去看喔^^


上一篇
【Day7】Bootstrap選單看不懂?其實沒你看的那麼難
下一篇
【Day9】製作wordpress主題前的基本準備:本地wordpress架設與編碼工具準備
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言